import { useActions, useValues } from 'kea'

import { IconCheckCircle } from '@posthog/icons'
import { LemonButton } from '@posthog/lemon-ui'

import { METRIC_CONTEXTS } from '../Metrics/experimentMetricModalLogic'
import { metricSourceModalLogic } from '../Metrics/metricSourceModalLogic'
import { experimentLogic } from '../experimentLogic'
import { modalsLogic } from '../modalsLogic'

export function PreLaunchChecklist(): JSX.Element {
    const { experiment, usesNewQueryRunner } = useValues(experimentLogic)
    const { openDescriptionModal, openPrimaryMetricSourceModal } = useActions(modalsLogic)
    const { openMetricSourceModal } = useActions(metricSourceModalLogic)

    const hasPrimaryMetrics =
        [
            ...(experiment.metrics || []),
            ...(experiment.saved_metrics || []).filter((sm) => sm.metadata.type === 'primary'),
        ].length > 0

    return (
        <div>
            <div className="flex items-center deprecated-space-x-2 mb-2">
                <h2 className="mb-0 font-semibold text-lg leading-6">Pre-launch checklist</h2>
            </div>

            <div className="bg-bg-light rounded p-4 border">
                <div>
                    {/* Step 1 - Hypothesis */}
                    <div className="flex gap-3 mb-6">
                        {experiment.description ? (
                            <IconCheckCircle className="text-success flex-none w-6 h-6" />
                        ) : (
                            <div className="flex-none w-5 h-5 rounded-full border-2 border-orange" />
                        )}
                        <div className="flex-1">
                            <div className={`text-xs font-semibold ${experiment.description ? 'text-success' : ''}`}>
                                Step 1
                            </div>
                            <div className="flex items-center justify-between">
                                <div>
                                    <div
                                        className={`font-semibold ${
                                            experiment.description ? 'text-muted line-through' : ''
                                        }`}
                                    >
                                        Add hypothesis
                                    </div>
                                    <div
                                        className={`text-sm ${
                                            experiment.description ? 'text-muted line-through' : 'text-muted'
                                        }`}
                                    >
                                        Document what you expect to learn from this experiment
                                    </div>
                                </div>
                                {!experiment.description && (
                                    <LemonButton
                                        type="secondary"
                                        size="small"
                                        onClick={() => {
                                            openDescriptionModal()
                                        }}
                                    >
                                        Add hypothesis
                                    </LemonButton>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Step 2 - Metric */}
                    <div className="flex gap-3">
                        {hasPrimaryMetrics ? (
                            <IconCheckCircle className="text-success flex-none w-6 h-6" />
                        ) : (
                            <div className="flex-none w-5 h-5 rounded-full border-2 border-orange" />
                        )}
                        <div className="flex-1">
                            <div className={`text-xs font-semibold ${hasPrimaryMetrics ? 'text-success' : ''}`}>
                                Step 2
                            </div>
                            <div className="flex items-center justify-between">
                                <div>
                                    <div
                                        className={`font-semibold ${
                                            hasPrimaryMetrics ? 'text-muted line-through' : ''
                                        }`}
                                    >
                                        Add first metric
                                    </div>
                                    <div
                                        className={`text-sm ${
                                            hasPrimaryMetrics ? 'text-muted line-through' : 'text-muted'
                                        }`}
                                    >
                                        Define your experiment's primary success metric
                                    </div>
                                </div>
                                {!hasPrimaryMetrics && (
                                    <LemonButton
                                        type="secondary"
                                        size="small"
                                        onClick={() => {
                                            usesNewQueryRunner
                                                ? openMetricSourceModal(METRIC_CONTEXTS.primary)
                                                : openPrimaryMetricSourceModal()
                                        }}
                                    >
                                        Add metric
                                    </LemonButton>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
